.block {
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,.08);
    background: $white;

    &--card {
        padding: 30px 25px;
    }
}

.table {
    font-size: 16px;
    color: #444;
    &__thead {

        letter-spacing: -4px;
    }
    &__td {
        display: inline-block;
        letter-spacing: normal;
        font-size: 17px;
        padding: 12px;
        border-bottom: 1px solid $d;
    }
    &__tbody {
        font-size: 0;
        .table__td {
            font-size: 14px;
        }
    }
    &__t-row {
        background: $white;
        letter-spacing: -4px;
        cursor: pointer;
        transition: .2s cubic-bezier(0.4, 0.0, 0.2, 1);
        &--dark {
            background: #f7f8fa;
        }
        &:hover {
            background: $e;
        }
    }
    &__link {
        color: $primary;
        text-decoration: underline;
    }
}

@for $i from 5 through 30 {
    .w#{$i} {
        width: 1% * $i;
    }
}

.menu {
    display: flex;
    flex-direction: row;
    &__unit {
        font-size: 18px;
        color: #999;
        padding: 20px 30px;
        background: $white;
        &.active {
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 0 0 1px #eee;
            z-index: 2;
            background: $e;
            &::after {
                content: '';
                position: absolute;
                bottom: -1px;
                width: 0;
                height: 0;
                border: 8px solid transparent;
                border-bottom-color: #fff;
                border-bottom-width: 10px;
                left: 50%;
                transform: translateX(-50%);
                filter: drop-shadow(0 -1px 0 #ddd);
            }
        }
    }
}